<script setup>
import { ref } from 'vue'
const visableDrawer = ref(false)
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {
  AddBusService,
  EditBusService,
  GetBusDetailService
} from '@/api/bus'
import{GetRouteService,GetRouteDetailService} from '@/api/route'
import{GetDriverService,GetDriverDetailService} from '@/api/Driver'
import { ElMessage } from 'element-plus'
// 默认数据
const defaultForm = {
  licensePlate: '',
  id: '',
  model: '',
  capacity: '',
  status:'',
  lastMaintenanceDate:'',
  nextInspectionDate:'',
  route:''
}
const selectId = ref()

const routes = ref([])

const route = ref()

const selectDrivers = ref([])
const selectedIds = ref([])
const drivers = ref([])


//表单校验规则
const rules = {
  licensePlate: [
    { required: true, message: '请输入公交车车牌号', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '公交车车牌号必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
  model: [{ required: true, message: '请输入公交车型号', trigger: 'blur' }],
  capacity: [{ required: true, message: '请输入公交车客载量', trigger: 'blur' }],
  status: [{ required: true, message: '请输入公交车状态', trigger: 'blur' }],
  lastMaintenanceDate: [{ required: true, message: '请输入公交车上次维修日期', trigger: 'blur' }],
  nextInspectionDate: [{ required: true, message: '请输入公交车下次检查日期', trigger: 'blur' }],
  route: [{ required: true, message: '请输入公交车路线', trigger: 'blur' }]
}

// 准备数据
const formModel = ref({ ...defaultForm })

const open = async (row) => {
  visableDrawer.value = true
  const res = await GetRouteService()
  routes.value = res.data.data
  const ss = await GetDriverService()
  drivers.value = ss.data.data
  console.log(ss);
  if (row.id) {
    //需要基于row.id发送请求，获取编辑对应的详情数据，进行回显
    const res = await GetBusDetailService(row.id)
    formModel.value = res.data.data
  } else {
    formModel.value = { ...defaultForm } //基于默认的数据，重置form数据
  }
  console.log(row)
}
const formRef = ref()

const onSubmit = async () => {
  await formRef.value.validate()
  const isEdit = formModel.value.id
      const ss = await GetRouteDetailService(selectId.value)
      formModel.value.route = ss.data.data
	  delete formModel.value.route.pointList
	  for (var i = 0; i < selectedIds.value.length; i++) {
	    const ss = await GetDriverDetailService(selectedIds.value[i])
	    selectDrivers.value.push(ss.data.data)
	  }
	  formModel.value.drivers = selectDrivers.value
	  selectDrivers.value = []
	  selectedIds.value = []
  if (isEdit) {
    await EditBusService(formModel.value)
    ElMessage.success('修改成功')
    visableDrawer.value = false
    emit('success', 'edit')
  } else {
    delete formModel.value.id
	console.log(formModel.value);
    await AddBusService(formModel.value)
    ElMessage.success('添加成功')
    visableDrawer.value = false
    //通知到父组件，添加成功了
    emit('success', 'add')
  }
}

const emit = defineEmits(['success'])

const busStatus = [
  {
    value: '0',
    label: '正常',
  },
  {
    value: '1',
    label: '禁止',
  }
  ]
  




defineExpose({
  open
})
</script>

<template>
  <el-drawer v-model="visableDrawer" title="添加公交车" size="40%">
    <el-form ref="formRef" :model="formModel" :rules="rules" abel-width="100px">
      <el-form-item label="车牌号">
        <el-input
          placeholder="请输入公交车车牌号"
          v-model="formModel.licensePlate"
        ></el-input>
      </el-form-item>
      <el-form-item label="型号">
        <el-input
          placeholder="请输入公交车型号"
          v-model="formModel.model"
        ></el-input>
      </el-form-item>
      <el-form-item label="客载量">
        <el-input
          placeholder="请输入公交车客载量"
          v-model="formModel.capacity"
        ></el-input>
      </el-form-item>
	  <el-form-item label="状态">
		  <el-select
			  v-model="formModel.status"
			  placeholder="选择状态"
			  size="large"
			  style="width: 240px"
			>
			  <el-option
				v-for="item in busStatus"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			  />
			</el-select>
	  </el-form-item>
	  <el-form-item label="上次维修日期">
	    <el-date-picker
	      v-model="formModel.lastMaintenanceDate"
	      type="date"
	      placeholder="请输入公交车上次维修日期"
	      size="default"
	      value-format="YYYY-MM-DD HH:mm:ss"
	    />
	  </el-form-item>
	  <el-form-item label="下次检查日期">
	    <el-date-picker
	      v-model="formModel.nextInspectionDate"
	      type="date"
	      placeholder="请输入公交车下次检查日期"
	      size="default"
	      value-format="YYYY-MM-DD HH:mm:ss"
	    />
	  </el-form-item>
	  <el-form-item label="路线">
	    <el-select
	        v-model="selectId"
	        placeholder="选择路线"
	        size="large"
	        style="width: 240px"
	      >
	        <el-option
	          v-for="item in routes"
	          :key="item.id"
	          :label="item.routeName"
	          :value="item.id"
	        />
	      </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-select
	      v-model="selectedIds"
	      placeholder="请选择司机"
	      multiple
	      style="width: 240px"
	    >
	      <el-option
	        v-for="item in drivers"
	        :key="item.id"
	        :label="item.driverName"
	        :value="item.id"
	      />
	    </el-select>
	  </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit()" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: buser;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
